<template>
    <div id="handicap">
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark title">
                    实时成交
                </div>
            </el-col>
            <el-col :span="24" class="tables">
                <el-table :data="list" style="width: 100%">
                <el-table-column prop label="时间" min-width="100">
                    <template slot-scope="scope">
                        <span style="color:#fff">{{scope.row.date}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop label="价格(USDT)" min-width="100">
                    <template slot-scope="scope">
                        <span :class="[scope.row.typeDesc==2?'red':'green']">{{scope.row.price}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop min-width="100" label="数量(手)">
                    <template slot-scope="scope">
                        <span
                            :class="[scope.row.typeDesc==2?'red':'green']"
                        >{{scope.row.amount}}</span>
                    </template>
                </el-table-column>
            </el-table>
            </el-col>
        </el-row>
    </div>
</template>
<script>
// import { getDealRecord } from "../../api/api";
import { mapState } from "Vuex";
export default {
    name: "handicap",
    data() {
        return {
            list:[]
        };
    },
    watch:{
        "firstBiMsg"(){
            this.getPankou();
        },
    },
    computed: {
        ...mapState(["firstBiMsg"])
    },
    created(){
        this.getPankou();
    },
    methods: {
        getPankou(){
            var params = {
                childCoinName :JSON.parse(this.firstBiMsg).childCoinName,
                motherCoinName :JSON.parse(this.firstBiMsg).motherCoinName
            }
            getDealRecord(params).then(res=>{
                if(res.data.code == 200){
                    this.list = res.data.data.dealRecordList
                   console.log(res.data.data.dealRecordList,333)
                }else{
                    
                }
               
            })
        }
    }
};
</script>
<style lang='less' scoped>
@color1:#162235;
@color2:#8B91B1;
@color3:#1B273B;
@line:#1e2b40;
@color4:#111D2D;
.tables{
    height: 800px;
    overflow: scroll;
}
.tables::-webkit-scrollbar{
    display: none;
}
#handicap{
    background-color: @color4;
    height: 850px;
    border: 1px solid @line;
    padding: 4px;
    box-sizing: border-box;
    .title{
        background-color: @color1;
        padding: 10px 5px;
        box-sizing: border-box;
        font-size: 14px;
        color: #fff;
    }
}
.red {
    color: #eb375d !important;
}
.green {
    color: #4cdfb0 !important;
}
/deep/.el-table_2_column_5 > div {
    text-align: right;
}
/deep/.el-table_2_column_6 > div {
    text-align: right;
}
</style>